<template>
	<div style="display: flex; justify-content: space-between;">
		<h2>教师管理</h2>
		<h2><button @click="go2add()">添加教师</button></h2>
	</div>
	<div style="display: flex;">
		<div style="width: 90%; border: blue 1px solid;">
			<h2 style="text-align: center;">教师显示</h2>
			<table border="1" style="width: 100%;">
				<tr>
					<th>编号</th>
					<th>名字</th>
					<th>账号</th>
					<!-- <th>密码</th> -->
					<th>图片</th>
					<th>操作</th>
				</tr>
				<tr v-for="x in teas" :key="x.uid" @click="go2up(x.uid)" :class="{ c: tea.uid === x.uid }">
					<td>{{ x.uid }}</td>
					<td>{{ x.uname }}</td>
					<td>{{ x.phone }}</td>
					<!-- <td>{{ x.pwd }}</td> -->
					<td>
						<div style="width: 60px; height: 13vh;">
							<img :src="$ip + `/api/public/showimg/` + x.pic" style="width: 100%; height: 100%;" />
						</div>
					</td>
					<td><button @click.stop="del(x.uid)">删除</button></td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			teas: [],//教师列表
			tea: {},//当前教师
			token: ''//令牌
		}
	},
	methods: {//方法
		go2add() {//添加，通过路由跳转，并携带参数，通过路由参数获取id
			this.$router.push({
				path: '/adm/teaadd',
				query: { id: 0 }
			})
		},
		go2up(uid) {//更新:根据uid去修改
			this.$router.push({
				path: '/adm/teaadd',
				query: { id: uid }
			})
		},
		del(uid) {//删除:根据uid删除
			const url = `${this.$ip}/api/adm/tea/del?uid=${uid}`
			this.$axios.get(url, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.teas = resp.data.data
					console.log(resp.data.data)
				})
				.catch((error) => {
					console.error('删除教师失败:', error)
				})
		},
		fetchTeachers() {//获取教师列表
			const url = '/api/adm/tea/findAll'
			this.$get(url)
				.then((resp) => {
					this.teas = resp.data.data
					console.log(resp.data.data)
				})
				.catch((error) => {
					console.error('获取教师列表失败:', error)
				})
		}
	},
	mounted() {//页面加载
		this.token = window.localStorage.getItem("token")
		this.fetchTeachers()
	}
}
</script>

<style>
.c {
	background-color: #f0f0f0;
}
</style>